<!-- 课程推荐 --> 
<template>
    <div class="affix-container">
        <h4 style="padding-top: 10px;">
            <span>推荐课程</span>
            <el-button style="width: 100px;margin-left: 1000px; cursor: pointer;" @click="goBack()">查看更多</el-button>
        </h4>
        <el-row>
            <el-col v-for="(item, index) in carouselData" :key="index" :span="4" :offset="index > 0 ? 2 : 0">
                <el-card :body-style="{ padding: '5px' }" style="width: 252px;margin-top: 20px; cursor: pointer;"
                    @click="goBackcoudetails(item.courseId)">
                    <img :src="item.courseCover" class="image" /> <!-- 假设每个对象有一个imageUrl属性 -->
                    <div style="padding: 14px;text-align: center;height: 30px;">
                        <span class="crousename">{{ item.courseName }}</span> <!-- 假设每个对象有一个title属性 -->
                    </div>
                    <div style="height: 35px;">
                        <!-- <span class="cprice">{{ '￥' + item.courseCPrice }}</span> -->
                        <span class="cprice" v-if="item.courseCPrice == '免费'" style="margin-left: 8px;">{{ item.courseCPrice }}</span>
                        <span v-else class="cprice">{{'￥' + item.courseCPrice }}</span>
                        <!-- <el-button v-else-if="item.orderState == '等待支付'" @click="handleClick(item.goodId)" type="primary">{{ item.orderState }}</el-button> -->
                        <span class="oprice">{{ '￥' + item.courseOPrice }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script >
import { ref, onMounted } from 'vue'
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import router from '@/router';


export default {
    setup() {
        const carouselData = ref([]);

        //发起请求返回推荐的数据
        onMounted(async () => {
            // try { 
            const response = await axios.get('/course/findBestCourses');
            if (response.code === 200) {
                console.log(response.data);
                for (let index = 0; index < response.data.length; index++) {
                    if (response.data[index].courseCPrice == 0) {
                        response.data[index].courseCPrice = '免费'
                    } 
                }
                carouselData.value = response.data;
            }
            // } catch (error) {  
            //     ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            // }  
        });
        function goBack() {
            router.push('/courseList')
        }
        function goBackcoudetails(Item) {
            router.push("/productChild/" + Item)
        }
        return {
            carouselData,
            goBackcoudetails,
            goBack,
        };
    },

};

</script>

<style>
.cprice {
    font-size: 25px;
    color: red;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.oprice {
    font-size: 14px;
    text-decoration-line: line-through;
    margin-left: 10px;
    color: rgb(81, 81, 82);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.course {
    margin-top: 20px;
    float: left;
    margin-left: 38px;
}

.image {
    width: 250px;
    height: 100px;
    display: block;
}

.crousename {
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(0, 0, 0);
}
</style>
  